<!doctype html>
<html lang="en">
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->
 
    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->
 
    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->
    <title>meta标签详解</title>
</head>
<body>
<p>
    Loading 动画效果一
</p>
<style type="text/css">
.spinner-1 .spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
 
.spinner-1 .spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  -moz-animation: stretchdelay 1.2s infinite ease-in-out;
  -ms-animation: stretchdelay 1.2s infinite ease-in-out;
  -o-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner-1 .spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  -moz-animation-delay: -1.1s;
  -ms-animation-delay: -1.1s;
  -o-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner-1 .spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  -ms-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner-1 .spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner-1 .spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4); 
    -moz-transform: scaleY(0.4); 
    -ms-transform: scaleY(0.4); 
    -o-transform: scaleY(0.4); 
    transform: scaleY(0.4); 
  } 
  20% {
    -webkit-transform: scaleY(1.0);
    -moz-transform: scaleY(1.0);
    -ms-transform: scaleY(1.0);
    -o-transform: scaleY(1.0);
    transform: scaleY(1.0);
  }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
    -moz-transform: scaleY(0.4);
    -ms-transform: scaleY(0.4);
    -o-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
    -moz-transform: scaleY(1.0);
    -ms-transform: scaleY(1.0);
    -o-transform: scaleY(1.0);
  }
}    
</style>
<div class="spinner-1">
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
</div>

<p>Loading 动画效果二</p>
<style type="text/css">
.spinner-2 .spinner {
  width: 60px;
  height: 60px;
  background-color: #67CF22;
 
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  -moz-animation: rotateplane 1.2s infinite ease-in-out;
  -ms-animation: rotateplane 1.2s infinite ease-in-out;
  -o-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}
 
@-webkit-keyframes rotateplane {
  0% {
     -webkit-transform: perspective(120px);
     -moz-transform: perspective(120px);  
     -ms-transform: perspective(120px); 
     -o-transform: perspective(120px); 
     transform: perspective(120px); 
  }
  50% {
     -webkit-transform: perspective(120px) rotateY(180deg); 
     -moz-transform: perspective(120px) rotateY(180deg); 
     -ms-transform: perspective(120px) rotateY(180deg); 
     -o-transform: perspective(120px) rotateY(180deg); 
     transform: perspective(120px) rotateY(180deg); 
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); 
    -moz-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); 
    -ms-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); 
    -o-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); 
    transform: perspective(120px) rotateY(180deg)  rotateX(180deg); 
}
}
 
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -moz-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -ms-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -o-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -moz-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -ms-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -o-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -moz-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -o-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}    
</style>
<div class="spinner-2">
<div class="spinner"></div>
</div>

<p>
    Loading 动画效果三
</p>
<style type="text/css">
.spinner-3 .spinner {
  width: 60px;
  height: 60px;
 
  position: relative;
  margin: 100px auto;
}
 
.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #67CF22;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
   
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  -moz-animation: bounce 2.0s infinite ease-in-out;
  -ms-animation: bounce 2.0s infinite ease-in-out;
  -o-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
 
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  -ms-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0.0);
    -moz-transform: scale(0.0);  
    -ms-transform: scale(0.0); 
    -o-transform: scale(0.0); 
    transform: scale(0.0); 
  }
  50% {
    -webkit-transform: scale(1.0); 
    -moz-transform: scale(1.0); 
    -ms-transform: scale(1.0); 
    -o-transform: scale(1.0); 
    transform: scale(1.0); 
  }
}
 
@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -moz-transform: scale(0.0);
    -ms-transform: scale(0.0);
    -o-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
  }
}    
</style>
<div class="spinner-3">
<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>
</div>

<p>Loading 动画效果四</p>
<style type="text/css">
.spinner-4 .spinner {
  margin: 100px auto;
  width: 32px;
  height: 32px;
  position: relative;
}
 
.cube1, .cube2 {
  background-color: #67CF22;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
   
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  -moz-animation: cubemove 1.8s infinite ease-in-out;
  -ms-animation: cubemove 1.8s infinite ease-in-out;
  -o-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}
 
.cube2 {
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
@-webkit-keyframes cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); 
    -moz-transform: translateX(42px) rotate(-90deg) scale(0.5); 
    -ms-transform: translateX(42px) rotate(-90deg) scale(0.5); 
    -o-transform: translateX(42px) rotate(-90deg) scale(0.5); 
    transform: translateX(42px) rotate(-90deg) scale(0.5); 
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 
    -moz-transform: translateX(42px) translateY(42px) rotate(-180deg); 
    -ms-transform: translateX(42px) translateY(42px) rotate(-180deg); 
    -o-transform: translateX(42px) translateY(42px) rotate(-180deg); 
    transform: translateX(42px) translateY(42px) rotate(-180deg); 
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 
    -moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 
    -ms-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 
    -o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 
  }
  100% {
    -webkit-transform: rotate(-360deg); 
    -moz-transform: rotate(-360deg); 
    -ms-transform: rotate(-360deg); 
    -o-transform: rotate(-360deg); 
    transform: rotate(-360deg); 
  }
}
 
@keyframes cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -moz-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -ms-transform: translateX(42px) rotate(-90deg) scale(0.5);
    -o-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    -moz-transform: translateX(42px) translateY(42px) rotate(-179deg);
    -ms-transform: translateX(42px) translateY(42px) rotate(-179deg);
    -o-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -moz-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -ms-transform: translateX(42px) translateY(42px) rotate(-180deg);
    -o-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -ms-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
  }
}    
</style>
<div class="spinner-4">
<div class="spinner">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>
</div>

<p>Loading 动画效果五</p>
<style type="text/css">
.spinner-5 .spinner {
  margin: 100px auto;
  width: 90px;
  height: 90px;
  position: relative;
  text-align: center;
   
  -webkit-animation: rotate 2.0s infinite linear;
  -moz-animation: rotate 2.0s infinite linear;
  -ms-animation: rotate 2.0s infinite linear;
  -o-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}
 
.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #67CF22;
  border-radius: 100%;
   
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  -moz-animation: bounce 2.0s infinite ease-in-out;
  -ms-animation: bounce 2.0s infinite ease-in-out;
  -o-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
 
.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  -ms-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
@-webkit-keyframes rotate {
   100% {
        -webkit-transform: rotate(360deg); 
        -moz-transform: rotate(360deg); 
        -ms-transform: rotate(360deg); 
        -o-transform: rotate(360deg); 
        transform: rotate(360deg); 
   }
}
@-moz-keyframes rotate {
   100% {
        -webkit-transform: rotate(360deg); 
        -moz-transform: rotate(360deg); 
        -ms-transform: rotate(360deg); 
        -o-transform: rotate(360deg); 
        transform: rotate(360deg); 
   }
}
@-ms-keyframes rotate {
   100% {
        -webkit-transform: rotate(360deg); 
        -moz-transform: rotate(360deg); 
        -ms-transform: rotate(360deg); 
        -o-transform: rotate(360deg); 
        transform: rotate(360deg); 
   }
}
@-o-keyframes rotate {
   100% {
        -webkit-transform: rotate(360deg); 
        -moz-transform: rotate(360deg); 
        -ms-transform: rotate(360deg); 
        -o-transform: rotate(360deg); 
        transform: rotate(360deg); 
   }
}
@keyframes rotate {
  100% {
       transform: rotate(360deg);
       -webkit-transform: rotate(360deg); 
       -moz-transform: rotate(360deg); 
       -ms-transform: rotate(360deg); 
       -o-transform: rotate(360deg); 
  }
}
 
@-webkit-keyframes bounce {
  0%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0); 
     -o-transform: scale(0.0); 
     transform: scale(0.0); 
  }
  50% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0);
     -ms-transform: scale(1.0);
     -o-transform: scale(1.0);
     transform: scale(1.0);
  }
}
 
@keyframes bounce {
  0%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0); 
     -o-transform: scale(0.0); 
     transform: scale(0.0); 
  } 50% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0);
     -ms-transform: scale(1.0);
     -o-transform: scale(1.0);
     transform: scale(1.0);
  }
}    
</style>
<div class="spinner-5">
<div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
</div>

<p>Loading 动画效果六</p>
<style type="text/css">
.spinner-6 .spinner {
  margin: 100px auto 0;
  width: 150px;
  text-align: center;
}
 
.spinner-6 .spinner > div {
  width: 30px;
  height: 30px;
  background-color: #67CF22;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  -moz-animation: bouncedelay 1.4s infinite ease-in-out;
  -ms-animation: bouncedelay 1.4s infinite ease-in-out;
  -o-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner-6 .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  -moz-animation-delay: -0.32s;
  -ms-animation-delay: -0.32s;
  -o-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner-6 .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  -moz-animation-delay: -0.16s;
  -ms-animation-delay: -0.16s;
  -o-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0); 
     -o-transform: scale(0.0); 
     transform: scale(0.0); 
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0);
     -ms-transform: scale(1.0);
     -o-transform: scale(1.0);
     transform: scale(1.0);
  }
}
@-moz-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0); 
     -o-transform: scale(0.0); 
     transform: scale(0.0); 
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0);
     -ms-transform: scale(1.0);
     -o-transform: scale(1.0);
     transform: scale(1.0);
  }
}
@-ms-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0); 
     -o-transform: scale(0.0); 
     transform: scale(0.0); 
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0);
     -ms-transform: scale(1.0);
     -o-transform: scale(1.0);
     transform: scale(1.0);
  }
}
@-o-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0); 
     -o-transform: scale(0.0); 
     transform: scale(0.0); 
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0);
     -ms-transform: scale(1.0);
     -o-transform: scale(1.0);
     transform: scale(1.0);
  }
} 
@keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0); 
     -o-transform: scale(0.0); 
     transform: scale(0.0); 
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0);
     -ms-transform: scale(1.0);
     -o-transform: scale(1.0);
     transform: scale(1.0);
  }
}
</style>
<div class="spinner-6">
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
</div>

<p>Loading 动画效果七</p>
<style type="text/css">
.spinner-7 .spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
 
  border-radius: 100%; 
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  -moz-animation: scaleout 1.0s infinite ease-in-out;
  -ms-animation: scaleout 1.0s infinite ease-in-out;
  -o-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}
 
@-webkit-keyframes scaleout {
  0% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);  
     transform: scale(0.0); 
  }
  100% {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
@-moz-keyframes scaleout {
  0% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);  
     transform: scale(0.0); 
  }
  100% {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
} 
@-ms-keyframes scaleout {
  0% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);  
     transform: scale(0.0); 
  }
  100% {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
@-o-keyframes scaleout {
  0% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);  
     transform: scale(0.0); 
  }
  100% {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes scaleout {
  0% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0); 
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);  
     transform: scale(0.0); 
  } 100% {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}    
</style>
<div class="spinner-7">
<div class="spinner"></div>
</div>


<p>
    Loading 动画效果八
</p>
<style type="text/css">
.spinner-8 .spinner {
  margin: 100px auto;
  width: 20px;
  height: 20px;
  position: relative;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #333;
 
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  -moz-animation: bouncedelay 1.2s infinite ease-in-out;
  -ms-animation: bouncedelay 1.2s infinite ease-in-out;
  -o-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner-8 .spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  -o-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  -moz-animation-delay: -1.1s;
  -ms-animation-delay: -1.1s;
  -o-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
  -ms-animation-delay: -1.0s;
  -o-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -ms-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  -ms-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  -ms-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -ms-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  -moz-animation-delay: -0.3s;
  -ms-animation-delay: -0.3s;
  -o-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  -moz-animation-delay: -0.2s;
  -ms-animation-delay: -0.2s;
  -o-animation-delay: -0.2s;  
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  -moz-animation-delay: -0.1s;
  -ms-animation-delay: -0.1s;
  -o-animation-delay: -0.1s;  
  animation-delay: -0.1s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0);
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);
     transform: scale(0.0);
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0); 
     -ms-transform: scale(1.0); 
     -o-transform: scale(1.0); 
     transform: scale(1.0); 
  }
}
@-moz-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0);
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);
     transform: scale(0.0);
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0); 
     -ms-transform: scale(1.0); 
     -o-transform: scale(1.0); 
     transform: scale(1.0); 
  }
} 
@-ms-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0);
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);
     transform: scale(0.0);
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0); 
     -ms-transform: scale(1.0); 
     -o-transform: scale(1.0); 
     transform: scale(1.0); 
  }
}
@-o-keyframes bouncedelay {
  0%, 80%, 100% {
     -webkit-transform: scale(0.0); 
     -moz-transform: scale(0.0);
     -ms-transform: scale(0.0);
     -o-transform: scale(0.0);
     transform: scale(0.0);
  }
  40% {
     -webkit-transform: scale(1.0); 
     -moz-transform: scale(1.0); 
     -ms-transform: scale(1.0); 
     -o-transform: scale(1.0); 
     transform: scale(1.0); 
  }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -moz-transform: scale(0.0);
    -ms-transform: scale(0.0);
    -o-transform: scale(0.0);
    transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
  }
}
</style>
<div class="spinner-8">
<div class="spinner">
  <div class="spinner-container container1">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="spinner-container container2">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="spinner-container container3">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
</div>
</div>
</body>
</html>